<script>
export default {
  name: 'news',
  data() {
    return {
      messageList: [
        {id: '001', title: '消息01'},
        {id: '002', title: '消息02'},
        {id: '003', title: '消息03'},
        {id: '004', title: '消息04'},
        {id: '005', title: '消息05'},
        {id: '006', title: '消息06'},
        {id: this.a, title: this.b}
      ]

    }
  },
  props: ['a', 'b'],
  mounted() {
    console.log('NEWS', this);
  },
  methods: {
    showPush(m) {
      //使用push方式进行跳转
      this.$router.push({path: `/home/news/detail/${m.id}/${m.title}`}).catch(err => {
        console.log(err)
      })


    },
    showReplace(m) {

      // 使用replace方式进行跳转
      this.$router.replace({path: `/home/news/detail/${m.id}/${m.title}`}).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>

<template>
  <div>
    <ul>
      <li v-for="(p) in messageList" :key="p.id">
        <!--      通过?携带query进行to的字符串传参-->
        <!--        使用:(转为js表达式)配合模板字符串解析-->
        <!--        <router-link :to="`/home/news/detail?id=${p.id}&title=${p.title}`">{{ p.title }}</router-link>-->

        <!--     使用:(转为js表达式)携带query进行to的对象传参-->
        <!--        <router-link :to="{-->
        <!--                  path:'/home/news/detail',-->
        <!--                  name:'xiangqing',//使用路由命名-->
        <!--                  query:{id:p.id,title:p.title}-->
        <!--                }">{{ p.title }}-->
        <!--        </router-link>-->

        <router-link replace :to="{
                  // path:'/home/news/detail',
                  name:'xiangqing',//使用路由命名
                  params:{id:p.id,title:p.title}
                }">{{ p.title }}
        </router-link>
        <button @click="showPush(p)">push</button>
        <button @click="showReplace(p)">replace</button>
      </li>
    </ul>
    <router-view></router-view>
  </div>
</template>

<style scoped>
li {
  width: 100%;
  display: flex;
  margin: 10px 0;
}

button {
  //float: right;
  width: 60px;
  height: 20px;
}
</style>